<template>
  <div class="pie-wrap">
    <span class="pie-count">53<br/>次合作</span>
    <div id="charts10" ref="charts10" style="height: 400px;"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        show: false,
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                backgroundColor: 'rbg(0, 0, 0)',
                normal: {
                    show: true,
                    fontSize: '18',
                    color: '#fff'
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 40,
                    length2:20
                }
            },
            itemStyle: {
                shadowBlur: 80,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            data:[
              {value:2, name:'礼来', 
                itemStyle:{color: '#fff'}},
                {value:5, name:'拜耳',
                  itemStyle: {color: '#205460'}},
                {value:7, name:'阿斯利康',
                  itemStyle: {color: '#397f74'}},
                {value:12, name:'诺和诺德',
                  itemStyle: {color: '#80b790'}},
                {value:18, name:'辉瑞', 
                  itemStyle: {color: '#c5efa9'}}
            ]
        }
    ]
};
        
        var mycharts = this.$echarts.init(this.$refs.charts10)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style>
.pie-wrap{
  position: relative;
}
.pie-wrap .pie-count{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 170px;
  height: 80px;
  top: 160px;
  left: 50%;
  margin-left: -85px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
</style>
